import { Alert, Descriptions, Form, Input } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import React from 'react';
import { validateUserPwdRule } from 'utils/modules/validateUserPwdRule';
import { checkStr } from 'utils/tools';
import './style.scss';

/**
 * 测试密码强度页面
 */
export default class TestPagePwdValidate extends React.PureComponent {
  state = {
    passWords: '',
    // Baimei01user
    userName: '',
    destData: [],
    msg: '',
  };

  //把当前修改的值赋入state
  onChange = (e: any) => {
    const { name, value } = e.target;
    console.log(value, 'mima');
    this.setState(
      {
        [name]: value,
      },
      () => {
        this.onFinish();
      }
    );
  };

  // 提交
  onFinish = () => {
    const { userName, passWords } = this.state;
    if (!userName || !passWords) {
      this.setState({
        destData: [],
        msg: '错误提示：用户名和密码不能为空！',
      });
      return;
    }
    if (!checkStr(userName)) {
      this.setState({
        destData: [],
        msg: '错误提示：账号输入不合法，请输入15位内字符,英文数字下划线',
      });
      return;
    }

    console.log('Success:', userName, passWords);
    // debugger;
    // passWords需要转换为逗号拼接，作为参数给后端
    console.log('输入****密码:', passWords);
    const re = /\n/g;
    const newStr = passWords.replace(re, ',');
    const arr = newStr.split(',');
    // 开始逐个检测密码，输出结果
    const Fn = validateUserPwdRule;
    newStr;
    const destDataArr: any = [];
    arr.forEach(item => {
      const data = Fn.checkPassword(userName, item);
      destDataArr.push({
        password: item,
        ...data,
      });
    });
    this.setState({
      msg: '',
      destData: [...destDataArr],
    });
  };

  render() {
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    };
    const { userName, destData, msg } = this.state;
    return (
      <div className="validate-page">
        <Form {...layout}>
          <Form.Item label="用户名" className="ipt_area">
            <Input
              className="user"
              name="userName"
              maxLength={15}
              placeholder="请输入15位内字符,英文数字下划线"
              onChange={this.onChange}
              // 用于固定号码测试
              value={userName}
              allowClear
            />
          </Form.Item>
          <Form.Item label="检测密码" className="ipt_area">
            <TextArea
              className="pwds"
              name="passWords"
              rows={10}
              placeholder="多个用换行分隔，密码支持大小写英文字母、数字和特殊符号~@#$_^*%/.+-:;-"
              onChange={this.onChange}
              allowClear
            />
          </Form.Item>
          {msg && <Alert message={msg} type="error" showIcon className="tip-msg" />}
          {destData.map((item: any, index, array) => {
            return (
              <Descriptions bordered column={3} key={index}>
                <Descriptions.Item label="密码：">{item.password}</Descriptions.Item>
                <Descriptions.Item label="结果：" className={item.code ? 'tip-error' : ''}>
                  {item.msg}
                </Descriptions.Item>
                <Descriptions.Item label="备注：">{item.tip}</Descriptions.Item>
              </Descriptions>
            );
          })}
        </Form>
      </div>
    );
  }
}
